import QtQuick 2.0
Rectangle{
    Rectangle{
        id:rect1
        x:212
        y:50
        width: 76
        height: 96
        color: "lightsteelblue"
        MouseArea{
            id:area
            width: parent.width
            height: parent.height
            onClicked: rect2.visible=!rect2.visible
        }
    }
    Rectangle{
        id:rect2
        x:312
        y:50
        width: 76
        height: 96
        border.color: "lightsteelblue"
        border.width: 4
        radius: 8
    }
    Rectangle{
        id:rect3
        x:412
        y:50
        width: 76
        height: 96
        //渐变
        gradient: Gradient{
            GradientStop{
                position: 0.0;color:"lightsteelblue"
            }
            GradientStop{
                position: 1.0;color: "slategray"
            }
        }
        border.color: "slategray"
    }
    Text{
        x:512
        y:50
        width: 40
        height: 100
        //elide: Text.ElideMiddle //。。。省略号
        style: Text.Sunken //文本样式
        styleColor: "#FF4444"
        verticalAlignment: Text.AlignTop //文本元素内边界对齐方式
        text: "The quick brown fox"
        color: "#303030"
        font.family: "Ubuntu"
        font.pixelSize: 28
    }
    Image{
        x:812
        y:50
        width: 80
        height: 100
        source: "images/rocket.png"
        fillMode: Image.PreserveAspectCrop //避免裁剪图像数据被渲染到图像边界外
        clip: true //打开剪裁约束边界矩形绘制
    }
}


